<template>
  <div>
    <top-data></top-data>
    <!-- 轮播图 -->
    <div class="carousel">
      <div class="carousel-hd">
        <ul>
          <li
            v-for="(item, index) in carousel"
            :key="index"
            :style="{
              'background-image': 'url(' + item.widgetContent.src + ')',
            }"
          ></li>
        </ul>
      </div>
      <span class="btn-l iconfont icon-jiantouzuo-copy"></span>
      <span class="btn-r iconfont icon-jiantouyou"></span>
    </div>
    <!-- 广告 -->
    <div class="advertisement-father">
      <div
        class="advertisement"
        v-for="(item, index) in advertisement"
        :key="index"
        :style="{
          'background-image': 'url(' + item.list[0].skuImgUrl + ')',
        }"
      >
        <div class="texts">
          <div class="texts-t">
            <h2 :style="{ color: item.list[0].btnColor }">
              {{ item.list[0].skuName }}
            </h2>
            <p>
              <span>直降</span>
              <span :style="{ color: item.list[0].btnColor }">{{
                item.list[0].skuDesc
              }}</span>
            </p>
          </div>
          <div class="texts-b">
            <p>
              <span>￥7199</span>
              <span>￥7999</span>
            </p>
            <p>
              <span>{{ item.list[0].btnText }}</span>
              <span class="iconfont icon-jiantouyou"></span>
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="recommend w">
      <div class="title">
        <span class="title1"></span>
        <span class="title2"></span>
        <span class="title3"></span>
        <span class="title-t">热卖推荐</span>
        <span class="title3"></span>
        <span class="title2"></span>
        <span class="title1"></span>
      </div>
      <div class="recommend-tab">
        <ul>
          <li
            v-for="(item, index) in bestSellers"
            :key="index"
            @click="tabqiehuang(item.id)"
          >
            <div :class="{ con: bestSellersId == item.id }">
              {{ item.titel }}
            </div>
            <div>{{ item.text }}</div>
          </li>
        </ul>
      </div>
    </div>

    <el-button
      type="primary"
      @click="toDetails"
      v-loading.fullscreen.lock="fullscreenLoading"
    >
    </el-button>

    <div class="commodity w">
      <ul>
        <li
          v-for="(item, index) in commodity"
          :key="index"
          @click="toDetails(item.id)"
          v-show="index <= count"
        >
          <div class="pic">
            <img :src="item.imageUrl" width="230" height="230" alt="" />
          </div>
          <div class="introduce">
            <h4>{{ item.name }}</h4>
            <p>{{ item.text }}</p>
            <p>
              <span>¥{{ item.originalPrice }}</span>
              <span>¥{{ item.presentPrice }}</span>
            </p>
          </div>
          <div class="comment">
            <p>{{ item.comment[0].content }}</p>
            <p>{{ item.comment[0].username }}</p>
          </div>
          <div class="satisfied">
            <p>
              <span class="iconfont icon-xiaolian"></span> 满意度{{
                item.satisfied
              }}
            </p>
          </div>
        </li>
      </ul>
    </div>

    <div class="infinite-list-wrapper w" style="overflow: auto">
      <ul
        class="list"
        v-infinite-scroll="load"
        infinite-scroll-disabled="disabled"
      >
        <li v-for="i in count" :key="i" class="list-item"></li>
      </ul>
      <p v-if="loading">加载中...</p>
      <p v-if="noMore">没有更多了</p>
    </div>

    <foot-data></foot-data>
  </div>
</template>

<script>
import { mall } from "../api/home";
import topData from "../components/topData.vue";
import footData from "../components/footData.vue";
export default {
  data() {
    return {
      carousel: null,
      advertisement: null,
      bestSellers: null,
      bestSellersId: 201,
      commodityList: [],
      count: 9,
      loading: false,
      fullscreenLoading: false,
    };
  },
  methods: {
    tabqiehuang(id) {
      this.bestSellersId = id;
      this.count = 9;
    },
    toDetails(id) {
      this.fullscreenLoading = true;
      setTimeout(() => {
        this.fullscreenLoading = false;
        this.$router.push({
          path: "detailsView",
          query: {
            id,
          },
        });
      }, 2000);
    },
    homeLists() {
      this.$http({
        url: "./json/home.json",
        methods: "get",
      }).then((data) => {
        this.carousel = data.data.data[1001];
        this.advertisement = data.data.data[342010][0].widgetContent.layout;
        this.bestSellers = data.data.data.bestSellers;
      });
    },

    commodityLists() {
      this.$http({
        url: "./json/commodity.json",
        methods: "get",
      }).then((data) => {
        this.commodityList = data.data.commodityList;
      });
    },

    load() {
      this.loading = true;
      setTimeout(() => {
        this.count += 10;
        this.loading = false;
      }, 3000);
    },
  },
  computed: {
    commodity() {
      return this.commodityList.filter((item) => {
        return JSON.stringify(item.id).substr(0, 3) == this.bestSellersId;
      });
    },

    noMore() {
      return this.count >= this.commodity.length;
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
  created() {
    this.homeLists();
    this.commodityLists();

    mall().then((data) => {
      console.log(data.data);
    });
  },
  components: { topData, footData },
};
</script>

<style lang="scss" scoped>
@import "../assets/css/public.scss";
@import "../assets/css/index.scss";
</style>